<template>
  <div class="page1">
    <ul>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li>page1</li>
      <li @click="toTest" style="background-color: pink">page1</li>
    </ul>
    <h1>延时数据：{{ number }}</h1>
    <AppIcon name="performance" width="30px" height="30px" />
  </div>
</template>

<script>
// 引入处理页面滚动高度的混合
import scrollTopMixin from '@/utils/mixins/scrollTopMixin'
export default {
  name: 'page1',
  mixins: [scrollTopMixin],
  data() {
    return {
      number: 0,
      needCacheToPathList: ['/test']
    }
  },
  methods: {
    setOptionMenu() {
      const menuOption = [
        {
          id: '1',
          type: 'icon',
          content: this.$store.state.base.iconMap['home'],
          handlerFunction: () => {
            this.$toast('点击了icon')
          }
        },
        {
          id: '2',
          type: 'text',
          content: '文字',
          handlerFunction: () => {
            this.$toast('点击了文字')
          }
        }
      ]
      this.$setOptionMenu(menuOption)
    },

    toTest() {
      this.$router.push('/test')
    }
  },
  mounted() {
    this.setOptionMenu()
    setTimeout(() => {
      this.number = 1000
    }, 3000)
  },
  activated() {
    // 恢复之前的滚动高度
    this.$el.scrollTop = this.$elScrollTop
    this.setOptionMenu()
  }
}
</script>

<style lang="less" scoped>
.page1 {
  width: 100%;
  height: 100%;
  overflow: auto;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #efefef;
    }
  }
}
</style>
